<template>
  <el-dialog class="pick-dialog" title="取消订单卖家退款" :visible.sync="dialogVisible" :close-on-click-modal="false" width="900px">
    <div class="form-box">
      <el-descriptions title="订单信息" border>
        <el-descriptions-item label="订单号">{{orderInfo.no}}</el-descriptions-item>
        <el-descriptions-item label="商品编号">{{orderInfo.goodsId}}</el-descriptions-item>
        <el-descriptions-item label="销售人">{{orderInfo.saleUserNickname}}</el-descriptions-item>
        <el-descriptions-item label="游戏名称">{{orderInfo.gameName}}</el-descriptions-item>
        <el-descriptions-item label="游戏账号">{{orderInfo.accountNumber}}</el-descriptions-item>
        <el-descriptions-item label="卖家名称">{{orderInfo.supplyChannel}}</el-descriptions-item>
        <el-descriptions-item label="卖家应退金额">{{orderInfo.supplyDiscountAmount}}元</el-descriptions-item>
      </el-descriptions>
      <el-form :model="ruleForm" ref="ruleForm" label-width="100px" :rules="rules" class="demo-ruleForm">
        <el-form-item label="备注:" prop="remark">
          <el-input type="textarea" v-model="ruleForm.remark" rows="3" style="width:400px"></el-input>
        </el-form-item>
        <el-form-item label="商品处理:" prop="changeGoodsSaleState">
          <el-select v-model="ruleForm.changeGoodsSaleState" >
            <el-option v-for="(label, key) in goodsType" :key="key" :label="label" :value="key"></el-option>
          </el-select>
        </el-form-item>
        
        <el-form-item label="退款方式:" prop="settlementType">
          <el-radio-group v-model="ruleForm.settlementType">
            <el-radio
              v-for="(item, key) in commonMaps.settlementTypeMap"
              :key="key"
              :label="key"
              >{{ item }}</el-radio
            >
          </el-radio-group>
        </el-form-item>
        <el-form-item
          label="上传图片:"
          prop="afterImg"
          v-if="ruleForm.settlementType == 2"
        >
          <el-upload
            :action="uploadImgUrl"
            list-type="picture-card"
            :file-list="imgShowList0"
            :multiple="true"
            :on-preview="handlePictureCardPreview"
            :on-success="handleUploadSuccess0"
            :on-remove="handleRemove0"
            :limit="9"
          >
            <i class="el-icon-plus"></i>
          </el-upload>
        </el-form-item>
        <!-- <el-form-item label="违规类型:" prop="" v-if="from=='kefu'">
          <el-select v-model="violationRulesIds" multiple>
            <el-option v-for="(item,i) in weiguiList" :key="i" :label="item.reason" :value="item.id"></el-option>
          </el-select>
        </el-form-item>
         -->
      </el-form>

      <div class="center">
        <el-button @click="close('ruleForm')">关闭</el-button>
        <el-button type="primary" @click="submitForm('ruleForm')" :loading="loading">确认</el-button>
      </div>
    </div>
  </el-dialog>
</template>

<script>
import orderApi from '@/api/pickUp/order'
import {violationRulesList} from "@/api/weigui/index"
export default {
  name: "pick",
  data() {
    return {
      dialogVisible: false,
      loading: false,
      violationRulesIds:[],
       // 上传相关
       uploadImgUrl: "",
      imgShowList0: [],
      newImages0: [],
      imgFileList0: [],

      goodsType:{
        4:'下架',
        1:'上架',
        5:'转问题号',
      },
      ruleForm: { 
        settlementType:'1',
        orderIds:'',
        remark:'',
        img:'',
        userId:"",
        userName:'',
        changeGoodsSaleState:4

      },
      rules:
      {
      
      },
      from:'',//来源
      weiguiList:[],
      orderInfo:{}
    };
  },
  created() { this.uploadImgUrl = process.env.VUE_APP_BASE_API + "/upload/image";},
  methods: {
    open(data) {
      this.orderInfo = data
      this.dialogVisible = true;
      this.imgShowList0 = [];
      this.newImages0 = [];
      this.imgFileList0 = [];
      this.ruleForm.orderIds = [data.id];
      this.ruleForm.userId = data.supplyChanelId;
      this.ruleForm.userName = data.supplyChannel;
      this.ruleForm.img = '';
      this.ruleForm.remark = '';
      this.ruleForm.settlementType = '1';
      this.ruleForm.changeGoodsSaleState = '4';
    },
    submitForm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {

          // 二次确认提示
          this.$confirm(`确认游戏账号为${this.orderInfo.accountNumber}的订单，卖家退回金额${this.orderInfo.supplyDiscountAmount}元吗？商品将进行${this.goodsType[this.ruleForm.changeGoodsSaleState||4]}处理，该操作不可逆，请谨慎操作！`, "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
          })
            .then(() => {
              this.loading = true
              // 组装图片附件
              // 拼接新上传的图片
              let ziliao = [];
              if (this["newImages0"] && this["newImages0"].length) {
                let newArr = [];
                this["newImages0"].forEach((img) => {
                  newArr.push({
                    name: img.name,
                    url: img.response.data.filePath,
                  });
                });
                ziliao = this["imgFileList0"].concat(newArr);
              } else {
                ziliao = this["imgFileList0"];
              }
              // ziliao
              // console.log("%c Line:212 🍖 ziliao", "color:#f5ce50", ziliao);
              this.ruleForm.img = JSON.stringify(ziliao);
              orderApi.cancelOrderRepayment(this.ruleForm).then(res=>{
                // console.log("%c Line:93 🍬取消订单 res", "color:#42b983", res);
                this.dialogVisible = false;
                this.loading = false
                if(res.code==200){
                  this.$message.success(res.msg)
                  this.$parent.getList()
                }
              }).catch(err=>{
                this.loading = false
              })
            })
            .catch(() => {});


          
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    // 查询违规类型 violationRulesList
    getViolationRulesList(){
      violationRulesList({
        isPage:2
      }).then(res=>{
        console.log("%c Line:133 🍯 res", "color:#ea7e5c", res);
        this.weiguiList = res.rows
      })
    },
    // 上传图片相关
    // 图片预览
    handlePictureCardPreview(file) {
      this.$viewerApi({
        images: [file.url],
      });
    },
    uploadNumber(file, fileList) {
      //限制图片数量
      this.$modal.msgError("最多只能上传9张图片");
    },
    // 图片上传成功
    handleUploadSuccess0(res, file, fileList) {
      if (res.code == 200) {
        // 取得新上传的文件
        this.newImages0 = fileList.filter((t) => {
          return t.url.indexOf("blob:") > -1;
        });
      }
    },
    // 图片删除
    handleRemove0(response) {
      const that = this;
      // 1.获取将要删除图片的临时路径
      const filePath = response.url;
      // 2.找到图片对应的索引值
      this.imgFileList0.forEach(function (element, key) {
        if (element.url === filePath) {
          that.imgFileList0.splice(key, 1); //回显的图片
        }
      });
      this.newImages0.forEach(function (element, key) {
        if (element.url === filePath) {
          that.newImages0.splice(key, 1); //新上传的图片
        }
      });
    },
    close(formName) {
      this.dialogVisible = false
    }
  }
};
</script>
<style scoped lang="scss">

.demo-ruleForm {
  padding-right: 20px;
  margin-top: 20px;
}

.center {
  text-align: center;
}



.pick-dialog>>>.el-input--medium input {
  text-align: left;
}</style>
